<template>
	<!-- 用户管理 -->
	<div>
		<!-- 头部 -->
		<el-row>
			<!-- 面包屑 -->
			<el-col>
				<el-breadcrumb separator="/" style="margin-bottom: 10px;">
					<el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ path: '/quarters' }">用户管理</el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
			<!-- 搜索、操作 -->
			<el-col class="inp">
				<div class="block">
					<span class="demonstration">用户手机号：</span>
					<el-input v-model="select_list.communityName" placeholder="请输入要查询的用户手机号"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">用户名称：</span>
					<el-input v-model="select_list.communityName" placeholder="请输入要查询的用户名称"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">活跃小区：</span>
					<el-input v-model="select_list.communityName" placeholder="请输入要查询的活跃小区"
						style="width: 200px; padding: auto 15px;">
					</el-input>
				</div>
				<div class="block">
					<span class="demonstration">创建时间：</span>
					<el-date-picker v-model="dataValue" value-format="yyyy-MM-dd HH:mm:ss" clearable @clear="get_value"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="block">
					<el-button type="primary" @click="get_value">搜索</el-button>
				</div>
			</el-col>
		</el-row>
		<!-- 主体 -->
		<!-- 表格数据 -->
		<el-row>
			<el-table :data="tableData" border style="width: 100%;" :header-cell-style="tableStyle"
				:cell-style="tableCen">
				<el-table-column prop="userId" label="ID" style="text-align: center;">
				</el-table-column>
				<el-table-column prop="userName" label="名称">
				</el-table-column>
				<el-table-column prop="userProfilePhoto" label="头像">
				</el-table-column>
				<el-table-column prop="userPhone" label="手机号">
				</el-table-column>
				<el-table-column prop="activeCommunityName" label="活跃小区名字">
				</el-table-column>
				<el-table-column prop="userOrderCount" label="用户订单数">
				</el-table-column>
				<el-table-column prop="addTime" label="注册时间" width="160px">
				</el-table-column>
			</el-table>
		</el-row>
		<!-- 分页 -->
		<el-row style="text-align: center; margin-top: 20px;">
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="select_list.pageNum" :page-sizes="[5, 10, 20, 50]" :page-size="select_list.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="select_list.total">
				</el-pagination>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// 查询显示条件
				select_list: {
					communityName: '',
					startTime: '',
					endTime: '',
					pageNum: 1,
					pageSize: 5,
					total: 1
				},
				// 搜索时间差
				dataValue: '',
				// 表格数据
				tableData: [],
				// 样式
				tableStyle: {
					'background-color': '#409eff',
					'color': 'white',
					'text-align': 'center'
				},
				tableCen: {
					'text-align': 'center'
				}
			}
		},
		methods: {
			// 获取数据
			get_value() {
				this.$http.get('http://43.143.190.87:8091/panghudaojiaBackend/user/queryUserList', {
						params: this.select_list
					})
					.then((res) => {
						// console.log(res.data.data)
						if (res.status == 200) {
							this.tableData = res.data.data.list
							this.select_list.total = res.data.data.total
						} else {
							this.$message.error('数据获取失败')
						}
					})
					.catch((error) => {
						this.$message.error('服务器失联' + error)
					})
			},
			// 每页条数改变
			handleSizeChange(size) {
				this.select_list.pageSize = size
				console.log(this.select_list.pageSize)
				this.get_value()
			},
			// 页码改变
			handleCurrentChange(num) {
				this.select_list.pageNum = num
				console.log(this.select_list.pageNum)
				this.get_value()
			},
		},
		mounted() {
			this.get_value()
		},
		watch: {
			// 监听搜索日期变化
			dataValue(newdata) {
				this.select_list.startTime = newdata[0]
				this.select_list.endTime = newdata[1]
			}
		},
	}
</script>

<style>
	.inp {
		margin-bottom: 10px;
		display: flex;
		flex-flow: wrap;
		justify-content: start;
	}

	.inp .block {
		margin-top: 10px;
		margin-right: 20px;
	}
</style>